<script setup lang="ts">
    import type {ProductInfo} from './type'
    import { Picture } from '@element-plus/icons-vue'
    import { buildImgSrc, imageBindSrc } from '@/utils/file'

















    const baseApi = '/wcs/product-info'

    

    const {loadData, loading, model} = useDetail<ProductInfo>(baseApi)

    defineExpose({ init: loadData })
</script>

<template>
    <el-empty v-if="!Object.keys(model).length" v-loading="loading" />
    <el-descriptions v-else v-loading="loading" :column="2" border >
            <el-descriptions-item label="产品编号" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.productNumber }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="产品名称" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.productName }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="毛胚编号" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.blankNumber }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="毛胚名称" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.blankName }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="成品名称" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.finalGoodsName }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="生产路线名称" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.productionRouteName }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="生产路线" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.productionRoute }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="料盘容量" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.trayCapacity }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="料盘图片" label-class-name="item-label" label-align="right">
                        <el-space wrap>
                            <el-image
                                    v-for="(file, i) in model.trayPictureFiles"
                                    :key="i"
                                    fit="contain"
                                    v-bind="imageBindSrc(file)"
                                    :initial-index="i"
                                    :preview-src-list="model.trayPictureFiles?.map(e => buildImgSrc(e.accessUrl))"
                            >
                                <template #error>
                                    <div class="image-error-slot">
                                        <el-icon :size="32"><Picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>
                        </el-space>
            </el-descriptions-item>
            <el-descriptions-item label="状态" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.status }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="创建人" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.createByLabel }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.createTime }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="更新人" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.updateByLabel }}
                    </span>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间" label-class-name="item-label" label-align="right">
                    <span class="txt-short">
                        {{ model.updateTime }}
                    </span>
            </el-descriptions-item>
    </el-descriptions>
</template>

<style scoped lang="scss">
    .el-descriptions {
        :deep(.el-descriptions__header) {
            margin: 0 10px 12px;
        }

            :deep(.item-label) {
                width: 120px;
            }

            .el-image {
                width: 150px;
                height: 150px;
                border-radius: 6px;
                box-sizing: border-box;
                border: 1px solid var(--el-border-color);
            }
    }
</style>